import React, {lazy,Suspense} from 'react';
import {changeTdk, goSystem, setScrollTop} from '../../assets/js/utils';
import hoc from './positionHoc';
import  Css from '../../assets/css/job/index.css';
import ScrollAnim from 'rc-scroll-anim';

const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));

const PositionComponent=hoc((props)=>{
    const ScrollParallax =  ScrollAnim.Parallax;
    return(
        <React.Fragment>
            <div className={Css['job_banner']} id='indSuccess'>
                <ScrollParallax
                    className={Css['job_ban_bg']}
                    style={{backgroundImage:'url('+props.aBan.img+')'}}
                    location='indSuccess'
                    animation={{y:0, playScale: [0.9, 1.5]}}
                ></ScrollParallax>
                <div className={Css['jobBanCen_pos']}>
                    <p>
                        {props.aBan.title}
                        <strong>{props.aBan.btn}</strong>
                    </p>
                </div>
            </div>
            <div className={Css['pos_abi']}>
                <div className={Css['pos_abi_title']}>关爱通有什么？</div>
                <ul>
                    {
                        props.aAbi.length>0?
                            props.aAbi.map((item,index)=>{
                                return(
                                    <li key={index}>
                                        <i className={item.icn}></i>
                                        <p>{item.title}</p>
                                    </li>
                                )
                            })
                            :''
                    }
                </ul>
            </div>
            <div className={Css['pos_rec']}>
                <div className={Css['pos_rec_cen']}>
                    <div className={Css['pos_rec_title']}>我们在找什么人？</div>
                    <div className={Css['pos_rec_list']}>
                        需要有长远的眼光，专业的能力、<br />和对所做之事的热爱。
                    </div>
                </div>
            </div>
            <div className={Css['pos_post']}>
                <div className={Css['pos_post_title']}>以下是空缺岗位的具体职责与要求，有意者请详阅，并发简历至：<span > hr@guanaitong.com</span>
                    <span>，邮件标题请注明“应聘职位+姓名”。</span>
                </div>
                <ul>
                    {

                        props.aPosList.length>0?
                            props.aPosList.map((item,index)=>{
                                return(
                                    <li key={index}>
                                        <div className={item.bChecked?Css['pos_post_box']+' '+Css['active']:Css['pos_post_box']} onClick={props.onClickPost.bind(this,index)}>
                                            <p>{item.title}</p>
                                            <i></i>
                                        </div>
                                        {
                                            item.bChecked?
                                                <div className={Css['pos_post_list']}>
                                                    <strong>职责描述：</strong><br />
                                                    <span dangerouslySetInnerHTML={{__html:item.duty}}></span>
                                                    <strong>任职要求：</strong><br />
                                                    <span dangerouslySetInnerHTML={{__html:item.mission}}></span>
                                                    <p>有意者请发简历至：<span onClick={props.goPages.bind(this,'mailto:hr@guanaitong.com')} > hr@guanaitong.com</span>，邮件标题请注明“应聘职位+姓名”</p>
                                                </div>
                                                :''
                                        }
                                    </li>
                                )
                            })
                            :''
                    }

                </ul>
            </div>
        </React.Fragment>
    )
})
class position extends React.Component{
    constructor(){
        super();
        this.state={
            title:'加入我们-中智关爱通',
            description:'关爱通欢迎您的加入！我们为员工提供节日福利、生日福利、午餐补贴、体检、保险等丰富的弹性福利项目，全方位的培训发展体系，秉承“责任、信任、快乐、创新”的文化价值观，构建“爱在其中”生态圈。',
            keywords:'人才招聘,员工福利,企业文化,学习培训,中智关爱通',
            aBan:{},
            aAbi:[],
            aPosList:[]
        }
    }
    componentDidMount(){
        this.goSystem();
        setTimeout(()=>{
            this.getABanData();
            this.getAbiData();
            this.getPosList()
        },200)
        changeTdk(this.state.title,this.state.description,this.state.keywords);
        setScrollTop(window.base.pages.index.iScrollTop);
    }
    // 获取banner数据
    getABanData(){
        let temABan={
            img:require('../../assets/images/job/job1.jpg'),
            title:'JOIN US',
            btn:'加入我们',
        };
        this.setState({aBan:temABan})
    }
    //获取abi数据
    getAbiData(){
        let temAbi=[
            {
                icn:'e62b',
                title:'有爱的职场'
            },
            {
                icn:'e61d',
                title:'有竞争力的薪资福利'
            },
            {
                icn:'e789',
                title:'多通道的职业发展体系'
            }
        ];
        this.setState({aAbi:temAbi})
    }
    //获取职位列表数据
    getPosList(){
        let temAPostList=[
            {
                title:'销售经理',
                duty:'1. 通过自有、公司提供或其他途径寻找潜在目标客户（以节日福利为主）并建立联系；<br />2. 定期与潜在客户进行电话沟通与线下拜访，实时了解客户需求，制定及推荐相匹配的<br />企业节日福利产品或其他福利产品以及解决方案；<br />3. 跟进客户，负责商务谈判并促成项目成交， 并负责完成回款；<br />4. 对客户进行公司产品和解决方案的使用指导与培训；<br/>5. 落实年度销售目标，跟踪达成情况，完成销售目标；<br/>6. 完成部门交办的其它工作内容或任务。<br/>',
                mission:' 1. 大专及以上学历，3年及以上B端客户销售经验，有一定规模的工会福利客户基础；<br />2. 性格坚韧外向、思维敏捷、表达能力强、有亲和力和较强的沟通能力与交际技巧；<br />3. 拥有敏锐的市场洞察力和强烈的事业心、责任心与积极的工作态度；<br />4. 有强烈的时间观念、服务意识及灵活熟练的谈判技巧。<br/>',
                bChecked:false
            },
            {
                title:'财务分析',
                duty:' 1. 跟进费用预算执行情况，提供费用预算原因分析报告，进行费用的滚动预测；<br />2. 提供各BU月度业绩分析报告；<br />3. 熟悉市场投放的方式和渠道，细化市场费用分析，及时跟进市场费用预算执行情况，分析各<br />渠道各BU的新客成本、转化率、客户价值和ROI；<br />4. 作为其中两个BU的财务BP，对接BU各类财务需求，协同部门内外提供财务专业解决方案；<br />5. 协助财务分析经理编制公司年度预算；<br />6. 上级交代其他数据支持工作。<br />',
                mission:'1. 财务相关专业本科及以上学历，4-6年工作经验，其中2年以上财务分析经验；<br />2. 具有较强数据敏感性和良好的数据分析能力；<br />3. 具有很强的自驱力、抗压力和韧性；<br />4. 具有较强的沟通、协调能力和表达能力；<br />5. 较强的Excel技能和PPT技能。<br />',
                bChecked:false
            },
            {
                title:'类目运营',
                duty:' 1. 对所负责类目的销售目标、毛利负责，提升和达成所辖商户的销售规模和毛利目标；<br />2. 负责制定系列提高商户流量、点击率、转化率、重复购买率、客单价等数据指标的运营策略；<br />3. 负责所辖类目商家的沟通与谈判，相关营销活动的策划与执行，培养平台用户对商户的消费<br />习惯，提升商户消费占比；<br />4. 指导提升商家运营能力，对商户合理分层，策略运营，通过每日数据分析，诊断定位商户问题，<br />指导商户标准化、高效益运营；<br />5. 与商家深入沟通，挖掘商户深度需求，推动产品改进，满足部分商户特殊需求支持，形成商户<br />案例模板，引领平台商户服务改进提升；<br />6. 负责所辖商家的安全稳定运营（包括但不限于商品审核、价格审核、图片审核、商家资质审核等），<br />避免任何运营事故的产生。负责协调解决所辖类目商家产生的客诉及其他相关问题。<br>',
                mission:'1. 具有主流电商平台2年以上类目运营经验，居家，家电，数码，食品，美妆，母婴等优先；<br />2. 具较强的商家管控和议价谈判能力，具有较强的运营活动策划和频道管理能力；            <br />3. 本科以上学历，90后优先，擅长沟通，性格外向，主动性强，具有强力的责任感和驱动力；<br />4. 工作细心认真，积极主动，学习能力强，拥有强烈的责任心和团队合作精神，能承受一定强度的<br />工作压力，具有较强的适应能力和应变能力，具备良好的职业道德。<br />',
                bChecked:false
            },
            {
                title:'产品经理',
                duty:'1. 负责移动端产品功能规划、需求调研及分析、原型设计及PRD文档的编写；<br>\n' +
                    '        2. 负责竞品分析、行业研究、业务发展趋势跟踪，掌握产品发展方向；<br>\n' +
                    '        3. 负责产品项目资源协调、进度把控，快速实现产品方案的落地；<br>\n' +
                    '        4. 跟踪产品运营数据，分析数据和用户反馈，持续改善产品；<br>\n' +
                    '        5. 跨部门合作，提升获客规模、改进留存、提高用户满意度。<br>',
                mission:'1. 本科及以上学历，3年以上互联网产品工作经验，能独立负责产品设计；<br>\n' +
                    '2. 熟练掌握Excel/PPT/word/Visio/project/AXURE RP等办公软件；<br>\n' +
                    '3. 注重用户体验，对数据敏感，有良好的数据跟踪和分析能力；<br>\n' +
                    '4. 有移动端产品经验，百万用户级别产品经验者更佳；<br>\n' +
                    '5. 较强的沟通、表达、学习能力，具有较强的产品责任和以结果为导向的高效执行力。<br>',
                bChecked:false
            },
            {
                title:'前端开发',
                duty:'    1. SaaS 平台前端设计、开发；<br>\n' +
                    '2. 相关系统的设计和评审，参与项目的技术攻坚和优化；<br>\n' +
                    '3. 系统文档的撰写、维护。<br>',
                mission:' 1. 良好的计算机原理与计算机网络相关知识；<br>\n' +
                    '2. 熟悉前端相关技术；<br>\n' +
                    '3. 熟悉React、React Hook、TS及其生态圈；<br>\n' +
                    '4. 热衷技术、追究原理、探究实践；<br>\n' +
                    '5. 具备良好的沟通能力和优秀的团队协作精神。<br>',
                bChecked:false
            },
            {
                title:'Java开发',
                duty:'1. 负责互联网平台开发及维护；<br>\n' +
                    '2. 按计划完成所属模块的开发任务，保证交付物达到质量标准；<br>\n' +
                    '3. 按要求编写开发相关文档；<br>\n' +
                    '4. 负责历史系统的维护工作，并为业务推进提供技术支持；<br>\n' +
                    '5.对BPM系统进行流程配置，参与流程系统的维护开发。<br>',
                mission:' 1. 大学本科及以上学历，计算机或者相关专业；<br>\n' +
                    '2. JAVA语言基础扎实，精通面向对象的分析和技术，了解常见的设计模式；<br>\n' +
                    '3. 熟悉Spring、Spring Boot、MyBatis等开源框架和其理念；<br>\n' +
                    '4. 熟悉Maven，Jenkins，Git，SVN 等工具；<br>\n' +
                    '5. 熟悉Mysql的使用；<br>\n' +
                    '6. 熟悉javascript, jquery；<br>\n' +
                    '7. 具备良好的表达和沟通能力、有团队合作精神，对工作热情，主动，有责任心。<br>',
                bChecked:false
            },
            {
                title:'测试',
                duty:' 1. 参与项目需求和迭代开发计划的讨论和评审；<br>\n' +
                    '2. 制定项目的测试计划并设计测试用例；<br>\n' +
                    '3. 搭建测试环境、测试执行并和开发一起进行bug的定位和跟踪；<br>\n' +
                    '4. 设计并执行自动化脚本及数据；<br>\n' +
                    '5. 项目上线后，对产生线上RCA事件或技术缺陷进行case_study分析；<br>\n' +
                    '6. 通过总结、对外交流、技术钻研和培训，进行测试过程和测试方法的持续改进。<br>',
                mission:' 1. 计算机及相关专业本科及以上学历，3年以上测试或开发经验；<br>\n' +
                    '2. 熟悉Java或Python中的某一种编程语言；<br>\n' +
                    '3. 熟悉测试理论，流程与方法，熟练使用主流的功能或性能测试工具<br>；\n' +
                    '4. 做过接口测试，有丰富的测试设计和执行的经验；<br>\n' +
                    '5. 具有一定的业务分析，沟通表达能力和综合协调能力，工作积极主动；<br>\n' +
                    '6. 熟悉SqlServer/Mysql等至少一种数据库管理系统，能够熟练编写SQL语句；<br>\n' +
                    '7. 具有较强的沟通理解能力，协调能力和学习能力；<br>\n' +
                    '8. 有在互联网领域测试团队进行测试工作经历的优先。<br>',
                bChecked:false
            }
        ];
        this.setState({aPosList:temAPostList})
    }
    //跳转平台
    goSystem(){
        goSystem(this.props,'position')
    }
    render(){
        let newsProps={
            aBan:this.state.aBan,
            aAbi:this.state.aAbi,
            aPosList:this.state.aPosList,
        }
        return(
            <React.Fragment>
                <Suspense　fallback={<div className={'loadWidth'}></div>} >
                    {/*导航*/}
                    <Nav props={this.props}></Nav>
                    {/*导航*/}
                    {/*右导航*/}
                    <RNav props={this.props}></RNav>
                    {/*右导航*/}
                </Suspense >
                <PositionComponent {...this.props} {...newsProps}></PositionComponent>
                <Suspense　fallback={<React.Fragment/>} >
                    {/*foot*/}
                    <Foot  props={this.props}></Foot>
                    {/*foot*/}
                </Suspense>

            </React.Fragment>
        )
    }
}
export default position